<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>23201012827 魏巍</title>

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="diandan.css">

    <script src="font/iconfont.js"></script>
    <script src="font_d42l8r0ck9c/iconfont.js"></script>
    <style>

/* 自取外送盒子 */
.box1{
            width: 100%;
            height: 170px;
            line-height: 10px;
            border-bottom: 1px solid #c45a5a;
            position: relative;/* 绝对定位的父元素一定要设置position；relative */
            float: right;
            background-color: #3C3B37;
            margin: 0px;
            color: #fff;
       }
       .box1 a{
        color: #fff;
       }
       /* 自取外送左右盒子 */
       .box1-1{
            width: 170px;
            height: 50px;
            padding: 0;
            margin-bottom: 10px;
            border: 0;
            float: left;
            display: flex;
       }
       .box1-1-1{
        width: 50%;
        font-size: 18px;
        text-align: center;
        padding-top: 15px;
        border-right: 1px solid #fff;
        transition: all 0.8s;
       }
       .box1-1-1:nth-child(1):hover{ /* hover鼠标放上才运动 */
            font-size: 25px;
            background-color: #666563;
        }
       .box1-1-2{
        width: 50%;
        font-size: 18px;
        text-align: center;
        padding-top: 15px;
        padding-left: 7px;
        transition: all 0.8s;
       }
       
        .box1-1-2:nth-child(2):hover{ /* hover鼠标放上才运动 */
            font-size: 25px;
            background-color: #666563;
        }
       /* 盒子2 地址 */
       .box1-2{
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            padding: 0;
            float: left;
            line-height: 10px;
       }
       /* 盒子3 滚动不滚 */
       .box1-3{
            width: 100%;
            height: 20px;
            margin: 0;
            padding: 0;
            float: left;
       }

       /* 商品 */
       /* <!-- 右侧主要内容 --> */
       .right{
        width: 90%;
        height: 100%;
        float: right;
        margin: 15px 0 0 0;
       }
       .box3-1{
        width: 100%;
        height: 100px;
        border:1px solid #cbc4c4;

       }
       .box3-1 img{
            float: left;
            margin-right: 10px;
            width: 100px;
            height: 100px;
       }
       .box3-1 p{
            width: 200px;
            height: 100px;
            line-height: 20px;
            overflow: hidden;
       }

        /* 下导航 */
        .icon {
           width: 1em;
           height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .bnav{
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            z-index: 9;
            width: 100%;
        }
        .body{
            margin-bottom: 50px;
        }
        .bnav>ul{
            display: flex;
        }
        .bnav li{
            width: 20%;
            text-align: center;
        }
        .icon{
            font-size: 36px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <!-- 订单页最上自取外送盒子  -->
<div class="box1">
    <div class="box1-1">
    <!-- 盒子上左 -->
      <div class="box1-1-1"><a href=""><h2>自取</h2></a></div>
    <!-- 盒子上右 -->
      <div class="box1-1-2"><a href=""><h2>喜外送</h2></a></div>
    </div>

    <!-- 盒子中地址 -->
    <div class="box1-2">
    <h2>大连高新软件园店</h2><br>
    <h4 style="font-size: 15px;">距离您1.2km</h4>
    </div>

    <!-- 盒子下滚动小字  不滚-->
    <div class="box1-3">
        <h5>按需点单，简约适度，喜享美味！</h5>
    </div>
    </div><!-- box1的 -->

<!-- 商品 -->
<div class="box2">
    <!-- 盒子2 左 -->
    <div class="left">
        <div class="a">
        <a href="#">年度饮品</a>
        <a href="#">时令上新</a>
        <a href="#">热饮推荐</a>
        <a href="#">轻负担推荐</a>
        <a href="#">清爽真果茶</a>
        <a href="#">轻盈茗奶茶</a>
        <a href="#">真牛乳茶</a>
        <a href="#">清爽茗茶</a>
        <a href="#">经典果茶</a>
        <a href="#">小料</a>
        </div>
    </div>


<!-- 盒子3商品右侧内容 -->
    <div class="right">
    <h3 style="font-size: 20px;">年度饮品</h3>
        <div class="box3-1">
           <img src="img/首页轮播图片/轮播图1.jpg">
           <p>水云间（山韵香）<br>￥15</p>
        </div>
        <div class="box3-1">
            <img src="img/首页轮播图片/轮播图2.jpg">
            <p>芭比粉水仙（岩韵香）<br>￥15</p>
         </div>
         <div class="box3-1">
            <img src="img/首页轮播图片/轮播图3.jpg">
            <p>多肉葡萄（首创）<br>￥18</p>
         </div>
         <div class="box3-1">
            <img src="img/首页轮播图片/轮播图4.jpg">
            <p>烤黑糖波波牛乳茶<br>￥19</p>
         </div>
         <div class="box3-1">
            <img src="img/首页轮播图片/轮播图5.jpg">
            <p>烤黑糖波波牛乳<br>￥19</p>
         </div>
         <div class="box3-1">
            <img src="img/首页轮播图片/轮播图1.jpg">
            <p>酷黑莓桑<br>￥19</p>
         </div>
         <div class="box3-1">
             <img src="img/首页轮播图片/轮播图2.jpg">
             <p>水云间（山韵香）<br>￥15</p>
          </div>
         
    </div><!-- right的 -->
</div><!-- box2的 -->

    <!-- 喜茶点单下导航 -->
    <bav class="bnav" style="background-color: #fff;">
        <ul>
            <li>
                <a href="./index.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./diandan.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinpinbanjia"></use>
                    </svg>
                    <p>点单</p>
                </a>
            </li>
            <li>
                <a href="./baihuo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan"></use>
                    </svg>
                    <p>百货</p>
                </a>
            </li>
            <li>
                <a href="./dingdan.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan1"></use>
                    </svg>
                    <p>订单</p>
                </a>
            </li>
            <li>
                <a href="./huiyuan.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chengyuan"></use>
                    </svg>
                    <p>我的</p>
                </a>
            </li>
      </ul>
      </bav>
      
</body>
</html>